<style>
    .mask {
        display: flex;
        position: fixed;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.6);
        top: 0;
        left: 0;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

    .content-top {
        color: #000;
        font-size: 20px;
        font-weight: 500;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #C9C5C5;
    }

    .preview-mask .swiper-preview-box {
        width: 65%;
        height: 750px;
        padding-bottom: 10px;
        border-radius: 5px;
        background: #fff;
    }

    .preview-mask .swiper-preview-box .swiper-container {
        height: 660px;
        background-color: #f2f2f2;
    }

    .preview-mask .swiper-preview-box .swiper-container .swiper-wrapper .swiper-slide {
        object-fit: contain;
    }

    .preview-mask .swiper-preview-box .layui-carousel img {
        width: 100%;
        height: 700px;
        object-fit: contain;
    }

    .preview-mask .swiper-preview-box .btn-close-preview {
        width: 100%;
        height: 50px;
    }
</style>

<script src="__STATIC__/jquery/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="__PLUG__/swiper-3.4.2/css/swiper.min.css">
<script src="__PLUG__/swiper-3.4.2/js/swiper.min.js" type="text/javascript"></script>

<div class="mask preview-mask" style="display: none">
    <div class="swiper-preview-box">
        <div class="content-top">图片预览</div>

        <div class="swiper-container" id="[swiper-id]">
            <div class="swiper-wrapper"></div>
            <div class="swiper-pagination"></div>
        </div>
        <button class="btn btn-w-m btn-primary btn-close-preview" onclick="closePreview()">关闭预览</button>
    </div>
</div>

<script>
    // 预览图片
    var swiper;

    // 渲染swiper-wrapper中的swiper-slide数据
    function renderSwiperSlide(that){
        var imgs = $(that).parent().parent().find('img');
        $.each(imgs, (key, val) =>{
            $('.swiper-wrapper').append('<img class="swiper-slide" src="'+ $(val)[0].src +'" />')
        })
    }

    /**
     * 预览
     * @param {elem} that this
     * @param {string} index_class 查找index的class
     * @param {string} box_id 锁定预览容器
     * */
    function previewImg(that, index_class, box_id = '') {
        renderSwiperSlide(that);

        $('.preview-mask').show();
        var index = box_id ? $('#' + box_id).find($('.' + index_class)).index(that) : $('.' + index_class).index(that);

        swiper = new Swiper('#[swiper-id]', {
            initialSlide: index,//设定初始化时slide的索引
            loop: true,
            grabCursor: true,
            pagination: '.swiper-pagination',
            paginationClickable: true,
            observer: true,
            observerParents: true
        })
    }

    // 关闭预览图轮播框
    function closePreview() {
        $('.preview-mask').hide();

        // 移除所有swiper-slide
        swiper.removeAllSlides();
        // 销毁swiper
        swiper.destroy();
    }
</script>